<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				新增银行卡 
			</view>
			<view class="List_entrance">
				<view class="List_item"  v-for="(item,index) in InputList" :key='index' :class=" index != 4 ? 'Bottom_boder' : ''" >
					<view style="width: 200rpx;">
						{{item.title}}
					</view>
					<view class="input" v-if="index != 4 && index != 2 && index != 3">
						<input type="number" v-model="item.value" v-if="index == 0"  @blur="check(item.value)"  :placeholder="item.placeholder" />
						<input type="test" v-model="item.value"  v-else disabled  :placeholder="item.placeholder" />
					</view>
					<view class="inputYzm" v-if='index == 4'>
						<input type="number" maxlength="6" v-model="item.value" @input="getYZM"   :placeholder="item.placeholder" />
						<view class="yzm" @click="getCode" v-if="popupshow">获取</view>
						<view class="yzm" v-else>{{count}}秒后可重试</view>
					</view>
					<view class="input" v-if='index == 3'>
						<input type="number" maxlength="11" v-model="item.value"   :placeholder="item.placeholder" />
					</view>
					<view class="c-password-input-box" v-if="index == 2">
						<view>
							<PwdControl style='' />
						</view>
					</view>
				</view>
				
			</view>
			<view class="Submit1" v-if="!isBTN">
				添加
			</view>
			<view class="Submit" v-else @tap.stop.prevent='Submit'>
				添加
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	import verify from '../../../utils/verify';
	import PwdControl from '@/components/PwdControl/index.vue'
	
	
	export default {
		components: {
			PwdControl
		},
		data() {
			return {
				InputList: [
					{
						title:'卡号',
						value:'',
						placeholder:'请输入银行卡号'
					},
					{
						title:'银行卡类型',
						value:'',
						placeholder:'请输入银行卡类型'
					},
					{
						title:'开户密码',
						value:'',
						placeholder:'请输入银行卡开户密码'
					},
					{
						title:'银行预留手机号',
						value:'',
						placeholder:'请输入银行卡预留手机号'
					},
					{
						title:'验证码',
						value:'',
						placeholder:'请输入验证码'
					},
				],
				token:'',
				password:'',
				popupshow: true,
				count: 0,
				timer:false,
				accp_txno:'',
				LLtoken:'',
				txn_seqno:'',
				isBTN:false,
				bankList:[],//绑定的银行卡
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.token = uni.getStorageSync('token')
			this.getBankList()
		},
		onShow(){
			// this.$nextTick(() => {
			// 	this.getRandom()
			// })
		},
		// mounted() {
		// 	this.$nextTick(() => {
		// 		this.getRandom()
		// 	})
		// },
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		created() {
			this.$nextTick(() => {
				window.pwdcontrol = undefined
				window.getRandom()
			})
		},
		methods:{
			/**
			 * 请求银行卡列表
			 */
			getBankList(){
			    let that = this;
				let is_lianlian = uni.getStorageSync('isOpenStatus').is_open_lianlian
				if(!is_lianlian) return
			    app._post_form('User/myAcctlist', {}, function (result) {
			        that.setData(result.data);
					that.bankList = result.data
					console.log('绑定的银行卡',that.bankList)
					uni.stopPullDownRefresh();
			    });
			},
			//获取验证码倒计时
			getCode() {
				console.log(window.pwdcontrol)
				this.password = window.pwdcontrol
				console.log(this.password)
				if(this.InputList[0].value == '' || this.InputList[0].value == null){
					app.showToast('请输入银行号');
				}else if(this.InputList[1].value == '' || this.InputList[1].value == null){
					app.showToast('请填写银行类型');
				}else if(this.password == '' || this.password == null ){
					app.showToast('请输入开户密码');
					console.log(this.password)
				}else if(this.InputList[3].value == '' || this.InputList[3].value == null){
					app.showToast('请输入手机号码');
				}else{
					this.getAdd()
					
				}
				
			},
			//输入银行卡号
			check(e) {
				console.log(this.InputList)
				console.log(e)
				let _this = this
				let i = false
				this.bankList.forEach((item)=>{
					if(e == item.linked_acctno){
						i = true
						
					}
				})
				if(i){
					app.showToast('请输入未绑定的银行卡');
					this.InputList[0].value = ''
				}else{
					app._post_form('User/getBankCardBin', {
						card_on: e
					}, function(result) {
						if (1 == result.code) {
							_this.InputList[1].value = result.data.bankName
						}
					}, null, function() {
						// 解除按钮禁用
						// _this.disabled = false;
					});
				}
				
			},
			//点击添加
			Submit(){
				let _this = this
				this.isBTN = false
				app._post_form('Banklist/bankCardAdd', {
					token:_this.token,
					txn_seqno:_this.txn_seqno,
					ll_token:_this.LLtoken,
					verify_code:_this.InputList[4].value
				}, function(result) {
					if (1 == result.code) {
						app.showToast('添加成功');
						setTimeout(()=>{
							uni.redirectTo({
								url: `../index`
							});
					
						},1500)
						
					}
				}, null, function() {
					// 解除按钮禁用
					this.isBTN = true
					app.showError(result.msg);
				});
			},
			//发送验证码
			getAdd(){
				let _this = this

				app._post_form('Banklist/bankCardAddApply', {
					token:_this.token,
					linked_acctno:this.InputList[0].value,
					linked_phone:this.InputList[3].value,
					password:this.password,
					random_key:window.random.random_key
				}, function(result) {
					if (1 == result.code) {
						_this.accp_txno = result.data.accp_txno
						_this.LLtoken = result.data.token
						_this.txn_seqno = result.data.txn_seqno
						
						const TIME_COUNT = 60;
						if (!_this.timer) {
							_this.count = TIME_COUNT;
							_this.popupshow = false;
							_this.timer = setInterval(() => {
								if (_this.count > 0 && _this.count <= TIME_COUNT) {
									_this.count--;
								} else {
									_this.popupshow = true;
									clearInterval(_this.timer);
									_this.timer = null;
								}
							}, 1000)
						}
						
						app.showError('发送验证码成功');
					}
				}, null, function() {
					// 解除按钮禁用
					// _this.popupshow = true
					app.showError(result.msg);
				});
			},
			// 发送验证码前校验手机号
			getYZM() {
				console.log(this.InputList[4].value);
				if(this.InputList[4].value.length == 6){
					this.isBTN = true
				}else{
					this.isBTN = false
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}
	.Bottom_boder{
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-family: 'dy-iconfont';
		font-weight: bold;
		line-height: 80rpx;
	}

	.List_entrance {
		margin: 0 30rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
		padding: 0 30rpx;
	
		.List_item {
			height: 100rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);
			input{
				font-size: 28rpx;
			}
			.input {
				input{
					width: 400rpx;
					
				}
			}
			.inputYzm{
				height: 48rpx;
				display: flex;
				align-items: center;
				input{
					width: 224rpx;
				}
				.yzm{
					font-size: 24rpx
				}
			}
		}
	}
	.Submit{
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(270deg,#1a1a1a,#666);
		color: #fff;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}
	.Submit1{
		color: #fff;
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(270deg,#969696,#e6e6e6);
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}
</style>
